<template>
  <div class="page">
    <div class="wrap">
      <el-card v-for="(item,index) in listData" :key="index" class="card">
        <img src="/images/zip.png">
        <div class="text">
          <h3>{{ item.name }}</h3>
          <p>{{ item.createdAt | formatDate }}</p>
          <div class="bottom">
            <el-button size="small" type="primary" icon="el-icon-edit" circle @click="link('moduleEdit',item)"></el-button>
            <el-button size="small" type="success" icon="el-icon-view" circle @click="link('preview',item)"></el-button>
          </div>
        </div>
      </el-card>
    </div>
    <msg></msg>
  </div>
</template>

<script>
import { api, formatDate } from '~/assets/utils'
import msg from '@/components/msg'
export default {
  layout: 'project',
  data() {
    return {
      listData: []
    }
  },
  components: {
    msg
  },
  filters: {
    formatDate(val) {
      return formatDate(val, 'yyyy-MM-dd hh:mm')
    }
  },
  methods: {
    link(type, item) {
      const { projectId } = this.$route.params
      if (type === 'menu') {
        this.$router.push({
          path: `${projectId}/menuDetail`
        })
      } else if (type === 'subMenu') {
        this.$router.push({
          path: `${projectId}/subMenuDetail`
        })
      } else if (type === 'model') {
        this.$router.push({
          path: `${projectId}/modelDetail`
        })
      } else if (type === 'moduleEdit') {
        this.$router.push({
          path: `${projectId}/modelDetail`,
          query: item
        })
      } else if (type === 'preview') {
        this.$router.push({
          path: '/preview',
          query: {
            id: item.id
          }
        })
      }
    }
  },
  async mounted() {
    const { projectId } = this.$route.params
    const res = await this.$axios.get(api.moduleList, { params: { projectId } })

    this.listData = res.data
  }
}
</script>

<style lang="scss" scoped>
.page{
  display: flex;
  .wrap{
    flex: 1
  }
}
.card {
    width: 250px;
    margin: 10px;
    /deep/ .el-card__body {
      padding: 10px;
      text-align: center;
    }
    img {
      display: block;
      width: 50px;
      margin: 0 auto;
    }
    h3 {
      font-size: 15px;
    }
    .bottom {
      display: flex;
      justify-content: center;
    }
    .bottom,
    .text {
      padding-top: 10px;
    }
  }
.buttons-wrap{
  padding: 10px 0;
}

</style>
